<template>
	<view>
		<u-toast ref="uToast" />
		<Login v-if="!show" @getInfo="login" @getInfoByWexin="getInfoByWexin"></Login>
		<view v-else>
			<view>
				<view class="header">
					<view class="bg">
						<view class="box">
							<view class="box-hd">
								<view class="avator">
									<img :src="userInfo.avatarUrl">
								</view>
								<view class="phone-number" v-if="show">{{ userInfo.nickName }}</view>
							</view>
							<view class="box-bd">
								<view class="item">
									<view class="icon"><img src="../../static/user/message.png"></view>
									<view class="text">我的通知</view>
								</view>
								<view class="item">
									<view class="icon"><img src="../../static/user/favorite.png"></view>
									<view class="text">我的收藏</view>
								</view>
								<view class="item">
									<view class="icon"><img src="../../static/user/service.png"></view>
									<view class="text">我的客服</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="list-content">
					<view class="list">
						<view class="li noborder">
							<view class="icon">
								<image src="../../static/user/card.png"></image>
							</view>
							<view class="text">我的名片</view>
							<image class="to" src="../../static/user/to.png"></image>
						</view>
					</view>
					<view class="list">
						<view class="li " @click="changeSkin">
							<view class="icon">
								<image src="../../static/user/skin.png"></image>
							</view>
							<view class="text">主题切换</view>
							<image class="to" src="../../static/user/to.png"></image>
						</view>
						<view class="li ">
							<view class="icon">
								<image src="../../static/user/help.png"></image>
							</view>
							<view class="text">帮助中心</view>
							<image class="to" src="../../static/user/to.png"></image>
						</view>
						<view class="li ">
							<view class="icon">
								<image src="../../static/user/about.png"></image>
							</view>
							<view class="text">关于我们</view>
							<image class="to" src="../../static/user/to.png"></image>
						</view>
						<view class="li ">
							<view class="icon">
								<image src="../../static/user/opinion.png"></image>
							</view>
							<view class="text">意见反馈</view>
							<image class="to" src="../../static/user/to.png"></image>
						</view>
					</view>
					<view class="list">
						<view class="li noborder">
							<view class="icon">
								<image src="../../static/user/set.png"></image>
							</view>
							<view class="text">系统设置</view>
							<image class="to" src="../../static/user/to.png"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Login from '@/components/Login/Login.vue'
	import { getUserInfo, login, loginByWx, bindWx } from '@/services/user/index.js'
	const db = wx.cloud.database()

	export default {
		data() {
			return {
				show: false,
				userInfo: {},
				src: 'https://636c-cloud1-7g12v4aa40e3788a-1306685426.tcb.qcloud.la/logo.png?sign=a0c570bee9d3efa0bb0c1eccff0ccd48&t=1627540877',
				openId: ""
			}
		},
		components: {
			Login
		},
		onLoad(option) {
			if (option) {
				this.show = option.showFlag
			}
		},
		onShow() {
			uni.getStorage({
				key: 'userInfo'
			}).then(res => {
				this.userInfo = res;
			})
		},
		methods: {
			async getInfoByWexin() {
				await getUserInfo().then(async res => {
					uni.login({
						provider: 'weixin',
						success: async (loginRes) => {
							// await uni.request({
							// 	url: "https://api.weixin.qq.com/sns/jscode2session?appid=wxada2bafb409bb1ba&secret=6467603a1eb6ea536dea3e38a536b9c9&js_code=" +
							// 		loginRes.code + "&grant_type=authorization_code",
							// 	success: openRes => {
							// 		this.openId = openRes.data.openid
							// 		if (res.cloudID) {
							// 			db.collection('pigeon_wxUser').where({
							// 				_openid: this.openId
							// 			}).get().then(result => {
							// 				// console.log(result)
							// 				if (result.data.length === 0) {
							// 					db.collection('pigeon_wxUser')
							// 						.add({
							// 							data: res
							// 						})
							// 				}
							// 				this.getUserByWx(res)
							// 			})
							// 		}
							// 	}
							// })
							console.log(loginRes)
							await loginByWx({code: loginRes.code}).then(wxRes => {
								if(wxRes.data.statusCode !== 20000) {
									uni.navigateTo({
										url: '/pages/user/bindInfo?account=' + res.nickName,
										animationType: 'pop-in',
										animationDuration: 200
									})
								}
							})
						}
					});
					
				})
			},
			getUserByWx(result) {
				db.collection("pigeon_user").where({
					openid: this.openId
				}).get().then(res => {
					if (res.data.length !== 0) {
						this.userInfo = res.data[0]
						this.show = true
					} else {
						uni.navigateTo({
							url: '/pages/user/bindInfo?openId=' + this.openId,
							animationType: 'pop-in',
							animationDuration: 200
						})
					}
				})
			},
			// 账号密码登录
			async login(form) {
				await login(form).then(res => {
					if(res.data.statusCode === 200) {
						this.$refs.uToast.show({
							title: '登录成功！',
							type: 'success',
							duration: '2300'
						})
						// this.userInfo = res.data[0]
						this.show = true
					}
				})
			},
			loginOut() {
				this.userInfo = {},
					uni.clearStorage()
				this.$refs.uToast.show({
					title: '退出成功！',
					type: 'success',
					duration: '2300'
				})
				this.show = false
			},
			// 获取信息
			getInfoById(id) {
				db.collection('pigeon_user').doc(id).get().then(res => {
					this.userInfo = res.data
					this.show = true
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
page{
	background-color:#f1f1f1;
	font-size: 30upx;
}
.header{
	background: #fff;
	height: 390upx;
	padding-bottom: 110upx;
	.bg{
		width: 100%;
		height:300upx;
		padding-top:100upx;
		background-color:#4191ea;
	}
}
.box{
	width: 650upx;
	height: 280upx;
	border-radius: 20upx;
	margin: 0 auto;
	background: #fff;
	box-shadow: 0 5upx 20upx 0upx rgba(0, 0, 150, .2); 
	.box-hd{
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: center;
		.avator{
			width: 160upx;
			height: 160upx;
			background: #fff;
			border: 5upx solid #fff;
			border-radius: 50%;
			margin-top: -80upx;
			overflow: hidden;
			img{
				width: 100%;
				height: 100%;
			}
		}
		.phone-number{
			width: 100%;
			text-align: center;
		}
	}
	.box-bd{
		display: flex;
		flex-wrap: nowrap;
		flex-direction: row;
		justify-content: center;
		.item{
			flex: 1 1 auto;
			display: flex;
			flex-wrap: wrap;
			flex-direction: row;
			justify-content: center;
			border-right: 1px solid #f1f1f1;
			margin: 15upx 0;
			&:last-child{
				border: none;
			}
			.icon{
				width: 60upx;
				height: 60upx;
				img{
					width: 100%;
					height: 100%;
				}
			}
			.text{
				width: 100%;
				text-align: center;
				margin-top: 10upx;
			}
		}
	}
}
.list-content{
	background: #fff;
}
.list{
	width:100%;
	border-bottom:15upx solid  #f1f1f1;
	background: #fff;
	&:last-child{
		border: none;
	}
	.li{
		width:92%;
		height:100upx;
		padding:0 4%;
		border-bottom:1px solid rgb(243,243,243);
		display:flex;
		align-items:center;
	&.noborder{
		border-bottom:0
		}
		.icon{
			flex-shrink:0;
			width:50upx;
			height:50upx;
			image{
				width:50upx;
				height:50upx;
			}
		}
		.text{
			padding-left:20upx;
			width:100%;
			color:#666;
		}
		.to{
			flex-shrink:0;
			width:40upx;
			height:40upx;
		}
	}
}
</style>
